<template>
  <el-time-picker
    :type="config.timeType || 'time'"
    v-model="searchValue"
    :placeholder="
      config.placeholder
        ? config.placeholder
        : $t('component.search.select_placeholder') + config.label
    "
    clearable
    :is-range="isRangeType"
    :format="timeFormat"
    :value-format="shouldUseValueFormat ? valueFormat : undefined"
    :range-separator="isRangeType ? '至' : undefined"
    :start-placeholder="isRangeType ? startPlaceholder : undefined"
    :end-placeholder="isRangeType ? endPlaceholder : undefined"
    :picker-options="pickerOptions"
    :disabled="config.disabled || false"
    :readonly="config.readonly || false"
    :style="{ width: '100%' }"
  ></el-time-picker>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps(["model", "config"]);
const emit = defineEmits(["update"]);

const searchValue = computed({
  get() {
    return props.model;
  },
  set(value) {
    emit("update", props.config, value);
  },
});

// 根据timeType设置格式
const timeFormat = computed(() => {
  const type = props.config?.timeType || "time";
  // 提供多种时间格式支持
  const formatMap = {
    time: "HH:mm:ss",
    timerange: "HH:mm:ss",
    "time-short": "HH:mm",
    "timerange-short": "HH:mm",
    "time-12h": "hh:mm:ss A",
    "timerange-12h": "hh:mm:ss A",
  };
  // 优先使用config中直接指定的format
  return props.config?.format || formatMap[type] || "HH:mm:ss";
});

// 判断是否为范围类型
const isRangeType = computed(() => {
  const type = props.config?.timeType || "time";
  return type.includes("range");
});

// 动态设置开始占位符
const startPlaceholder = computed(() => {
  const placeholderMap = {
    timerange: "开始时间",
    "timerange-short": "开始时间",
    "timerange-12h": "开始时间",
  };
  return props.config?.startPlaceholder || placeholderMap[props.config?.timeType] || "开始时间";
});

// 动态设置结束占位符
const endPlaceholder = computed(() => {
  const placeholderMap = {
    timerange: "结束时间",
    "timerange-short": "结束时间",
    "timerange-12h": "结束时间",
  };
  return props.config?.endPlaceholder || placeholderMap[props.config?.timeType] || "结束时间";
});

// 判断是否应该使用value-format
const shouldUseValueFormat = computed(() => {
  // 与datePicker保持一致的逻辑结构
  // 时间选择器通常都支持value-format
  return true;
});

const valueFormat = computed(() => {
  const type = props.config?.timeType || "time";
  const formatMap = {
    time: "HH:mm:ss",
    timerange: "HH:mm:ss",
    "time-short": "HH:mm",
    "timerange-short": "HH:mm",
    "time-12h": "hh:mm:ss A",
    "timerange-12h": "hh:mm:ss A",
  };
  // 优先使用config中直接指定的valueFormat
  return props.config?.valueFormat || formatMap[type] || "HH:mm:ss";
});

// 时间选择器选项
const pickerOptions = computed(() => {
  // 从config中获取额外的配置选项
  const options = {
    ...props.config?.pickerOptions,
    // 设置可选择的时间范围
    selectableRange: props.config?.selectableRange,
    // 设置时间间隔
    step: props.config?.step,
    // 设置禁用的时间
    disabledHours: props.config?.disabledHours,
    disabledMinutes: props.config?.disabledMinutes,
    disabledSeconds: props.config?.disabledSeconds,
    format: timeFormat.value,
  };
  
  // 根据timeType设置不同的默认选项
  const type = props.config?.timeType || "time";
  if (type.includes("12h")) {
    options.use12Hours = true;
  }
  
  return options;
});
</script>